//主播开播数量柱状图（功能4）
//要求获取某个小时四个数量,数据格式：dataa:[1,2,3,4....],datab:[5,6,7,8......],....
<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <el-row>
      <el-button style="float: left" type="primary" @click="open"
        >编辑数据</el-button
      >
    </el-row>
    <div id="areaHots" :style="{ width: '1200px', height: '800px' }" />

    <el-drawer
      title="主播开播数量表"
      :visible.sync="draw"
      direction="rtl"
      size="60%"
    >
      <el-row>
        <el-button
          @click="handleAdd()"
          size="mini"
          style="margin-bottom: 15px; float: left; margin-left: 20px"
          >添加数据</el-button
        >
      </el-row>
      <el-row>
        <el-input
        @input="changeTotal()"
          type="text"
          v-model="search"
          size="mini"
          placeholder="搜索分区"
          style="width: 500px; float: left; margin-left: 20px"
        />
      </el-row>
      <!-- .filter(data => !search || data.areaName.includes(search) ) -->
      <el-table
        :data="
          tableData.filter((data) => !search || data.areaName.includes(search))
          .slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        style="width: 96%; margin-left: 20px"
      >
        <el-table-column property="areaName" label="分区"></el-table-column>
        <el-table-column property="liveCount" label="直播数"></el-table-column>
        <el-table-column property="date" label="时间"></el-table-column>
        <!-- 搜索框与添加数据框 -->
        <el-table-column align="right">
          <template slot="header" slot-scope="scope">
            <!-- <el-button @click="handleAdd()" size="mini">添加数据</el-button>
            <el-input
              type="text"
              v-model="search"
              size="mini"
              placeholder="搜索分区"
            /> -->
          </template>

          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
        <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="totalCount"
    ></el-pagination>       
    </el-drawer>

    <!-- 修改的对话框 -->
    <template>
      <el-dialog title="修改数据" :visible.sync="editDialogue" width="30%">
        <el-form label-width="80px">
          <!-- 选择器 -->
          <el-form-item label="分区">
            <el-select
              v-model="changeData.areaName"
              placeholder="请选择"
              width="100px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="直播数">
            <el-input v-model="changeData.liveCount" type="number" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <!-- 日期 -->
            <el-date-picker
              v-model="changeData.date"
              type="datetime"
              placeholder="选择日期时间"
             
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleEditCancle()">取消</el-button>
          <el-button type="primary" @click="handleEditSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>

    <!-- 添加的对话框 -->
    <template>
      <el-dialog title="添加数据" :visible.sync="addDialogue" width="30%">
        <el-form label-width="80px">
          <el-form-item label="分区">
            <el-select
              v-model="changeData.areaName"
              placeholder="请选择"
              width="100px"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="直播数">
            <el-input v-model="changeData.liveCount"  type="number" style="width: 220px"></el-input>
          </el-form-item>
          <el-form-item label="时间">
            <!-- 日期 -->
            <el-date-picker
              v-model="changeData.date"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleAddCancle()">取消</el-button>
          <el-button type="primary" @click="handleAddSure()">确定</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>
<script>
import stores from "@/store";
export default {
  data() {
    return {
      currentPage:1,
      pageSize:12,
      totalCount:50,       
      options: [
        {
          value: "网游竞技",
          label: "网游竞技",
        },
        {
          value: "单机热游",
          label: "单机热游",
        },
        {
          value: "娱乐天地",
          label: "娱乐天地",
        },
        {
          value: "手游休闲",
          label: "手游休闲",
        },
      ],
      tableData: [
        {
          liveCount: "",
          areaName: "",
          date: "",
          id: "",
        },
      ],
      search: "",
      draw: false,
      editDialogue: false,
      addDialogue: false,
      changeData: {
        liveCount: "",
        areaName: "",
        date: "",
        id: "",
      },
    };
  },

  mounted() {
    this.$axios
      .post(stores.spring_url + "/home/function4", "function1")
      .then((res) => {
        console.log(res);
        this.drawLine(res.data.anchorCount);
      });
    this.$axios
      .post(stores.spring_url + "/home/function4/table", "function1")
      .then((res) => {
      //  res.data.tableData.sort(function(obj1,obj2){

      //     let val1 = obj1.liveCount
      //     let val2 = obj2.liveCount
      //     return val2 - val1

      //   } ) 
         
        this.tableData = res.data.tableData;
        this.totalCount=res.data.tableData.length;         
         console.log(res)
        // console.log(this.totalCount)
      });
  },
  methods: {
    changeTotal(){

      this.totalCount=this.tableData.filter((data) => !this.search || data.areaName.includes(this.search)).length
      console.log(this.totalCount)      
    },    
    handleCurrentChange(page) {
      this.currentPage = page;
    },      
    open() {
      this.draw = true;
    },
    handleEdit(index, row) {
      this.changeData.liveCount = row.liveCount;
      this.changeData.areaName = row.areaName;
      this.changeData.date = row.date;
      this.changeData.id = row.id;
      //console.log(this.changeData)
      this.editDialogue = true;
    },

    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(stores.spring_url + "/home/function4/delete", {
              params: { id: row.id },
            })
            .then((res) => {
              this.$router.go(0); //刷新页面
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              console.log(res.data);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleAdd(index, row) {
      this.addDialogue = true;
    },

    handleEditCancle() {
      this.editDialogue = false;
      //清零

      (this.changeData.liveCount = ""),
        (this.changeData.areaName = ""),
        (this.changeData.date = ""),
        (this.changeData.id = "");
    },
    handleAddCancle() {
      this.addDialogue = false;
      //清零

      (this.changeData.liveCount = ""),
        (this.changeData.areaName = ""),
        (this.changeData.date = ""),
        (this.changeData.id = "");
    },
    handleEditSure() {
      if(this.changeData.areaName==''){
        this.$alert("请选择分区","提示" ,{ confirmButtonText: "我知道了" });   
      }
      else if(this.changeData.liveCount==''){
        this.$alert("请输入直播数","提示" ,{ confirmButtonText: "我知道了" });   
      }
      else if(this.changeData.date==''){
        this.$alert("请选择时间","提示" ,{ confirmButtonText: "我知道了" });   
      }            
      //确定添加的数据为正数
      else if(this.changeData.liveCount<0){
        this.$alert("直播数不能小于0,请修改","提示" ,{ confirmButtonText: "我知道了" });              
        console.log(this.changeData.liveCount)
      }
      else{
        console.log("success")
        this.$confirm("确定保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.dat = this.changeData.date;
          var date = new Date(this.dat);
          var year = date.getFullYear();
          var month =
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1;
          var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          var hours =
            date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          var minutes =
            date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
          var seconds =
            date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
          var str =
            year +
            "-" +
            month +
            "-" +
            day +
            "T" +
            hours +
            ":" +
            minutes +
            ":" +
            seconds;
          this.changeData.date = str;

          this.$axios
            .post(stores.spring_url + "/home/function4/edit", this.changeData)
            .then((res) => {
              //console.log("success")
              this.$router.go(0); //刷新页面
            });
        });        
      }      

    },
    handleAddSure() {
      if(this.changeData.areaName==''){
        this.$alert("请选择分区","提示" ,{ confirmButtonText: "我知道了" });   
      }
      else if(this.changeData.liveCount==''){
        this.$alert("请输入直播数","提示" ,{ confirmButtonText: "我知道了" });   
      }
      else if(this.changeData.date==''){
        this.$alert("请选择时间","提示" ,{ confirmButtonText: "我知道了" });   
      }            
      //确定添加的数据为正数
      else if(this.changeData.liveCount<0){
        this.$alert("直播数不能小于0,请修改","提示" ,{ confirmButtonText: "我知道了" });              
        console.log(this.changeData.liveCount)
      }
      else{
        console.log("success")
      this.$confirm("确定添加?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.dat = this.changeData.date;
          var date = new Date(this.dat);
          var year = date.getFullYear();
          var month =
            date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1;
          var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
          var hours =
            date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
          var minutes =
            date.getMinutes() < 10
              ? "0" + date.getMinutes()
              : date.getMinutes();
          var seconds =
            date.getSeconds() < 10
              ? "0" + date.getSeconds()
              : date.getSeconds();
          var str =
            year +
            "-" +
            month +
            "-" +
            day +
            "T" +
            hours +
            ":" +
            minutes +
            ":" +
            seconds;
          this.changeData.date = str;
          this.$axios
            .post(stores.spring_url + "/home/function4/add", this.changeData)
            .then((res) => {
              //console.log("success")
              this.$router.go(0); //刷新页面
            });
        })
        .catch(() => {});        
      }       
    },

    drawLine(res) {
      const myChart = this.$echarts.init(document.getElementById("areaHots"));
      const adata = [];
      adata.push([
        "product",
        "网游区直播数",
        "单机区直播数",
        "手游区直播数",
        "娱乐天地直播数",
      ]);
      for (let i of res) {
        var temp = [];
        temp.push(i.time + "h"); //24h,每个hour记录四个数据
        temp.push(i.netGame);
        temp.push(i.singleGame);
        temp.push(i.phoneGame);
        temp.push(i.funGame);
        adata.push(temp);
      }

      //console.log(adata)
      myChart.setOption({
        color: ["#2da5ff", "#33dd81", "#ffe52d", "#ff7ba8"],
        legend: {},
        tooltip: {},
        dataset: {
          source: adata,
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
        ],
      });
    },
  },
};
</script>

<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>